<template>
   
    <view class="uni-container">
			<view class="container">
					<view class="logobj-img">
						<view class="logobj">
						</view>
					</view>
					<!-- logo -->
					<view class="logo">
						<view class="logo-left">
							<view class="logo-img">
									
							</view>
						</view>
						<view class="logo-right">
							<view class="message">
							</view>
						</view>
					</view>
					<!-- 输入框 -->
					<view class="inputs">
						<view class="list">
						</view>
						<view class="seach">
								
						</view>
						 <input type="text" class="input" placeholder="搜索你感兴趣的内容" />
					</view>
			</view>
        <!-- tab-->
      <view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="false" >
					<swiper-item v-for="(item,index) in categoryList" :key="index">
						<view class="list">
								<view class="list-item" v-for="(goodsItem,goodsIndex) in categoryList[index]" @click="openGoods(goodsItem,goodsIndex)" :key="goodsIndex" hover-class="itemActive">
									<view class="item-img">
										<view class="imgs">
												
										</view>
										<image :src="goodsItem.new_img" mode=""></image>
									</view>
									<view class="item-text">
											{{goodsItem.name}}
									</view>
								</view>
						</view>
					</swiper-item>
       	</swiper>
      </view>
			<!-- 通知 -->
			<view class="notice">
				<view class="notice-left">
						<view class="meelis"></view>
						<image src="/static/xld.png" class="xld"></image>
						<view class="notice-text">
								公告消息
						</view>
				</view>
				<view class="notice-right">
					 <view class="text">
							{{noticeText}}
					 </view>
				</view>
			</view>
    <!-- 购物 -->
			<view class="shopping">
					<view class="shopping-item" hover-class="checkActive">
							<view class="item-left">
									<view class="left-text">
											电商礼品卡 
									</view>
									<view class="text-text">
											超多大牌可兑换
									</view>
							</view>
							<view class="item-right">
									<view class="shoppingimg">
									</view>
							</view>
					</view>
					<view class="shopping-item" hover-class="checkActive">
							<view class="item-left">
									<view class="left-text">
											商超购物卡
									</view>
									<view class="text-text">
											低价折扣兑换
									</view>
							</view>
							<view class="item-right">
									<view class="shoppinglis">
									</view>
							</view>
					</view>
			</view>
      <!-- 图片轮播 -->
      <view class="advertisement-img">
        <swiper class="swiper_img" circular :indicator-dots="false" :autoplay="false" >
          <swiper-item v-for="(item,index) in sideList" class="swiper_img" :key="index">
            <image :src="item.images" class="advertisement" mode="aspectFit"></image>
          </swiper-item>
        </swiper>
      </view>
      <!-- 热门回收 -->
      <view class="Recycling">
          <view class="Recycling-item">
						<view class="Recycling-text">
							🔥 热门回收
						</view>
						<view class="text-center">
							
						</view>
						
						<view class="Recycling-list">
							<view class="box2"></view>
							<view class="list">
								<view class="list-item"  v-for="(item,index) in hotGoodList" @click="oepnCardDetail(item)" :key="index" >
									<view class="dazhi">
											<view class="daz">
													
											</view>
											<view class="dazi-text">
													最高
											</view>
											<view class="daiz-num">
													{{strDispose(item.diamond)}}
											</view>
											<view class="dazi-text">
													折
											</view>
									</view>
									<image :src="item.image?item.image.file_path:'../../static/default_img/default.png'" mode="aspectFit" class="jd"></image>
									<view class="list-text">
											{{item.goods_alias?item.goods_alias:item.name}}
									</view>
									<view class="lihs" hover-class="hoveActive">
										<view class="lijhuis">
										</view>
										<view class="lihs-text">
												 立即回收
										</view>
									</view>
								</view>
							</view>
						</view>
          </view>
        
      </view>
   
    </view>
  
 
</template>

<script>
	import * as Api from '@/api/home.js'
	
	export default {
		data() {
			return {
				categoryList:[],
				hotGoodList:[],
				topTitle:"团团收 - 省心的卡券回收平台",
				noticeText:"" ,
				app_assign:true,
				app_assl:true,
				assign:null,
				searchStr:"",
				
				swiperList:[
					"../../static/test_home_img/swiper1.png",
					"../../static/test_home_img/ad_index.jpg"
				],
				swiperCurrent:0,
				sideList:[],
				commonList:[]
			} 
		},
		onLoad() {
			this.getIndexNotice()
			this.getCategoryList()
			this.getHotProduct()
			this.sideShow()
		},
		onShow() {
			this.commonList = uni.getStorageSync("commonList")
		},
		onPageScroll(e) {
			// #ifdef H5 ||APP-PLUS
			this.assign = e.scrollTop >= 85?true:false
			// #endif
			// #ifdef H5
			if(this.app_assl){
				this.app_assign = e.scrollTop >= 128 - 80?false:true
			}
			// #endif
			// #ifdef APP-PLUS
			this.app_assign = e.scrollTop >= 85?false:true
			// #endif
		}, 
		methods: {
			onSearch(item){
				this.searchStr = item
				this.search()
			},
			handleSide(item){
				if(item.type === 1){
					location.href = item.url
				}
				if(item.type === 2){
					uni.previewImage({
						urls:[item.qrcodes]
					})
				}
			},
			sideShow(){
				Api.carouselchart()
				.then(result => {
					this.sideList = result.data
				})
			},
			strDispose(str){
				return Math.floor(Number(str))
			},
			handleSwiper(e){
				this.swiperCurrent = e.detail.current
			},
			oepnCardDetail(item){
				uni.navigateTo({
					url:"/pages/card/recycling?cate_id="+item.cate_id +"&id="+item.id
				});
			},
			openGoods(item,index){
				if(index === 0){
					uni.setStorageSync("yemian",15)
				}else{
					uni.setStorageSync("yemian",index)
				}
				uni.switchTab({
					url:"/pages/card/card"
				})
			},
			search(){
				if (this.searchStr) {
					uni.navigateTo({
						url:"/pages/search/index?search="+ this.searchStr
					})
					this.searchStr=''
				} else {
					this.$toast("请输入搜索内容")
				}
			},
			closeAppDown(){
				this.app_assign = false
				this.app_assl = false
			},
			getIndexNotice(){
				let _this = this
				Api.getIndexNotice({wxapp_id:_this.$wxapp_id})
				.then(result => {
					if(result.code === 1){
						_this.noticeText = result.data.notice
					}
				})
			},
			getHotProduct(){
				let _this = this
				Api.getHotProduct({wxapp_id:_this.$wxapp_id})
				.then(result => {
					if(result.code === 1){
						let hotProductList = result.data;
						_this.hotGoodList = hotProductList
					}
				})
			},
			getCategoryList(){
				let _this = this
				Api.getCategoryList({wxapp_id:_this.$wxapp_id})
				.then(result => {
					if(result.code === 1){
						let list = result.data
						let listFive = []
						let img = [
							'../../static/home/iocn3.png',
							'../../static/home/iocn2.png',
							'../../static/home/ionc4.png',
							'../../static/home/iocn1.png',
							'../../static/home/iocn5.png',
							'../../static/home/iocn7.png',
							'../../static/home/iocn6.png',
							'../../static/home/iocn8.png',
						]
						for(let i=0;i<list.length;i++){
							if(list[i].name === '积分兑'){
								continue
							}
							if(i+1 > img.length ){
								list[i]['new_img'] = img[0]
							}
							list[i]['new_img'] = img[i]
							listFive.push(list[i])
						}
						let newList = []
						let new1List = []
						let swiper = 4
						for(let i=0;i<listFive.length;i++){
							
							if((i + 1) % 4 === 0){
								new1List.push(listFive[i])
								
								newList.push(new1List)
								new1List = []
							}else{
								new1List.push(listFive[i])
							}
						}
						_this.categoryList = newList
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
   .checkActive{
       
         .shoppingimg{
               transform:scale(1.1)
         }
   }
    .uni-container{
        // width: 100vw;
        // padding-top: 30rpx;
        z-index: 111;
        display: flex;
        flex-direction: column;
        
        .container{
					padding-top: 30rpx;
					position:relative;
					background: linear-gradient( 148deg, #FAFDFF 0%, #E9F3F8 100%);
        }
        .logobj-img{
            height: 200rpx;
            overflow: hidden;
            position:absolute;
           top:-29rpx;
            left: 0;
            // width: 100vw;
           
        }
        .logobj{
            height: 340rpx;
            // width: 100vw;
            background: url('../../static/logobj.png') no-repeat;
            background-size: 100vw 340rpx;
        }
    }
    .logo{
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 48rpx;
        z-index: 1;
            .logo-img{
                width: 128rpx;
                height: 36rpx;
                background: url('../../static/logo.png') no-repeat;
                background-size: 128rpx 36rpx;
            }
            .message{
             width: 48rpx;
            height: 48rpx;
            background: url('../../static/message.png') no-repeat;
            background-size: 48rpx 48rpx;
            }
        
    }
    .inputs{
        height: 80rpx;
        margin-top: 38rpx;
        padding: 0 24rpx;
        position: relative;
        .list{
            position: absolute;
            left:24rpx;
            top: 0;
            // width: 90vw;
             height: 80rpx;
             background: url('../../static/list.png') no-repeat;
             background-size: 90vw 80rpx;
        }
        .seach{
             position: absolute;
             left: 36rpx;
             top: 24rpx;
             width: 35rpx;
             height: 35rpx;
             background: url('../../static/seach.png') no-repeat;
             background-size: 35rpx 35rpx;
        }
        .input{
            width: 80%;
            margin-left: 48rpx;
           height: 80rpx;
            padding: 0;
        }
    }
  
// tab
.uni-margin-wrap{
    padding-top: 24rpx;
    background-color: #fff;
   .swiper{
        height: 200rpx;
                & /deep/ .uni-swiper-dot{
                    margin: 0;
                				width: 40rpx;
                				height: 8rpx;
                				background: #EDE3C9;
                				border-radius: 0%;
                	}
                  & /deep/ .uni-swiper-dot-active{
                      background-color: #9C8446;
                  }
    }
   
    .list{
        display: flex;
        justify-content: space-around;
        .list-item{
            
            display: flex;
            flex-direction: column;
            .item-text{
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #000000;
                line-height: 30rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
            .item-img{
                .imgs{
                    
                }
               image{
                     transition:  0.2s linear;
                   width: 80rpx;
                   height: 80rpx;
               } 
            }
        }
    }
}
// 通知
.notice{
    padding: 0rpx 24rpx;
    padding-bottom: 10rpx;
    background-color: #fff;
    display: flex;
    .notice-left{
        display: flex;
        position: relative;
         width: 140rpx;
        margin-right: 10rpx;
        padding-left:12rpx ;
        align-items: center;
        .meelis{
            position: absolute;
            width: 140rpx;
            height: 44rpx;
            background: url('/static/meelis.png') no-repeat;
            background-size:140rpx  44rpx;
        }
        .xld{
            margin-left: 4rpx;
            width: 28rpx;
            height: 26rpx;
        }
        .notice-text{
            position: relative;
            z-index: 2;
            top: -1rpx;
            left: 4rpx;
            width: 100rpx;
            font-size: 22rpx;
            color: #FFFFFF;
        }
    }
    .notice-right{
        overflow: hidden;
        width: calc(100% - 160rpx);
        .text{
            width: 100%;
            font-size: 24rpx;
                color: #626566;
                white-space: nowrap; //禁止换行
                // overflow: hidden;
                // text-overflow: ellipsis; //...
                animation: aniMove 12s linear infinite;
            animation-fill-mode: forwards;
        }
       
    }
}
  @keyframes aniMove {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
}
// 购物
.shopping{
    background-color: #fff;
    height: 136rpx;
    padding: 0 24rpx ;
    display: flex;
    justify-content: space-around;
    .shopping-item{
        display: flex;
        align-items: center;
        .item-left{
            .left-text{
                margin-bottom: 20rpx;
               font-family: PingFang SC, PingFang SC;
               font-weight: 600;
               font-size: 30rpx;
               color: #333333;
               line-height: 30rpx;
               text-align: left;
               font-style: normal;
               text-transform: none;
            }
            .text-text{
                margin-top: 8rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #ABB0B2;
                line-height: 25rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }
        .item-right{
            .shoppingimg{
                margin-left: 20rpx;
                  transition:  0.2s linear;
                width: 96rpx;
                height: 96rpx;
                &:nth-child(1){
                    background: url('../../static/card.png') no-repeat;
                    background-size: 96rpx 96rpx;
                }
            }
            .shoppinglis{
                margin-left: 20rpx;
                  transition:  0.2s linear;
                width: 96rpx;
                height: 96rpx;
                &:nth-child(1){
                    background: url('../../static/shopping.png') no-repeat;
                    background-size: 96rpx 96rpx;
                }
            }
        }
    }
}
//图片轮播图
.advertisement-img{
    padding: 0 24rpx;
    // padding-top: 32rpx;
    background-color: #fff;
    .swiper_img{
      height: 200rpx;
			width: 100%;
    }
    .advertisement{
			width: 100%;
			height: 100%;
			transform:scale(1.1)
    }
}
//热门回收
.Recycling{
    background-color: #fff;
    padding: 0 24rpx ;
		margin-top: 40rpx;
		margin-bottom: 50rpx;
    .Recycling-item{
        background-color: #FFF5F9;
         padding: 24rpx 24rpx 24rpx 24rpx;
				 position: relative;
        .Recycling-text{
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 30rpx;
            color: #333333;
            line-height: 35rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
        .Recycling-list{
            position: relative;
						margin-top: 40rpx;
            .bj{
                position: absolute;
                left: 0;
                width: 100%;
                min-height: 685rpx;
            }
        }
				.box2{
					width: 200rpx;
					height: 80rpx;
					border-top: 70rpx solid transparent;
					border-left: 70rpx solid transparent;
					border-right: 0px solid transparent;
					border-bottom:70rpx solid #fff;
					position: absolute;
					top: -210rpx;
					z-index: 100;
					right:0;
				}
        .list{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
						background-color: #fff;
						padding-top: 40rpx;
            // padding-top: 150rpx;
						// min-height: 800rpx;
						// background: url('@/static/home/bj.png') no-repeat;
						// background-size:100% 100%;
						// background-position: center;
            .list-item{
                margin-bottom: 80rpx;
                display: flex;
                flex-direction: column;
                width: calc(100% / 3);
                align-items: center;
                .dazhi{
                    position: relative;
                    display: flex;
                    left: 40rpx;
                    top: -2rpx;
                    z-index: 3;
                    
                    align-items: center;
                    .daz{
                        position: absolute;
                        width: 110rpx;
                        height: 50rpx;
                        background: url('../../static/daz.png') no-repeat;
                        background-size: 100rpx 50rpx; 
                        // transition: 0.2s linear;
                       
                    }
                    .dazi-text{
                        margin-left: 4rpx;
                        position: relative;
                        z-index: 2;
                        font-family: D-DIN-DIN, D-DIN-DIN;
                        font-weight: bold;
                        font-size: 17rpx;
                        color: #FFFFFF;
                        line-height: 19rpx;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }
                    .dazi-text1{
                        position: relative;
                        z-index: 2;
                        font-family: D-DIN-DIN, D-DIN-DIN;
                        font-weight: bold;
                        font-size: 17rpx;
                        color: #FFFFFF;
                        line-height: 19rpx;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }
                    .daiz-num{
                        position: relative;
                        z-index: 2;
                        font-family: D-DIN-DIN, D-DIN-DIN;
                        font-weight: bold;
                        font-size: 27rpx;
                        color: #FFFFFF;
                        line-height: 32rpx;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }
                }
            .jd{
              transition:  0.2s linear;
							width: 108rpx;
							height: 108rpx;
							border-radius: 100%;
            }
            .list-text{
                position: relative;
                margin: 8rpx 0;
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                font-size: 30rpx;
                color: #333333;
                line-height: 35rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
            .lihs{
                position: relative;
                left: -60rpx;
                .lijhuis{
                      transition: all 0.2s ;
                    position: absolute;
                    width: 176rpx;
                    height: 60rpx;
                    background: url('../../static/lijhuis.png') no-repeat;
                    background-size: 176rpx 60rpx;
                }
                .lihs-text{
                     transition: all 0.2s ;
                    position: relative;
                    z-index: 1;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 22rpx;
                    color: #48BD1F;
                    line-height: 26rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                    top: 15rpx;
                    left: 60rpx;
                }
            }
            }
        }
    }
}
.hoveActive{
    .lijhuis{
     
         transform:scale(1.1)
    }
     .lihs-text{
         color: red !important;
     }
}
.itemActive{
  image{
       transform:scale(1.1)
  }  
}
</style>
